<template>
	<view class="card-detail">
		<view class="top">
			<card-pack-item :data="data" showQrcode />

			<!-- <view class="" style="width: 100%;height: 50rpx;margin-top: 20rpx;">
				<view class="" style="width: 20%;height: 50rpx;float: left;margin-top: 15rpx;">
					<view class="">
						<image src="" mode=""></image>
					</view>
					<view class="">
						转到我的卡
					</view>
				</view>
				<view class="" style="width: 20%;height: 50rpx;float: right;margin-top: 15rpx;">
					<view class="">
						<image src="" mode=""></image>
					</view>
					<view class="">
						转到其他用户
					</view>
				</view>
			</view> -->
			<view class="list_1 flex-row">
				<view class="list-items_1 flex-col justify-between" v-for="(item, index) in loopData0" :key="index" @click="cardlist(item,index)">
					<image class="icon_2" referrerpolicy="no-referrer" :src="item.lanhuimage0" />
					<text class="text_7">{{item.lanhutext0}}</text>
				</view>
			</view>
		</view>
		<view class="" style="background-color: #efefef;height: calc(98vh - 40vh); ">
			<!-- <view style="margin-top: 30rpx;font-weight: 700;font-size: 30rpx;">
				接收人
			</view> -->
			<view class="" style="width: 100%;height: 50rpx;margin-top: 20rpx;">
				<view class="" style="width: 20%;height: 50rpx;float: left;margin-top: 20rpx;margin-left: 30rpx;font-size: 28rpx;">
					转移记录
				</view>
				<view class="" style="width: 4%;height: 50rpx;float: right;margin-right: 30rpx;margin-top: 28rpx;" @click="card_transfer_records">
					<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
				</view>
				<view class="" style="width: 14%;height: 50rpx;float: right;margin-top: 15rpx;font-size: 24rpx;color: #999999;line-height: 54rpx;" @click="card_transfer_records">
					查看所有
				</view>
			</view>
			<!-- <view class="list_2 flex-col">
				<view class="list-items_2 flex-col" v-for="(item, index) in loopData1" :key="index">
					<view class="box_6 flex-row justify-between">
						<text class="text_9">{{item.lanhutext0}}</text>
						<view class="text-wrapper_4">
							<text class="text_10">{{item.lanhutext1}}</text>
							<text class="text_11">{{item.lanhutext2}}</text>
						</view>
					</view>
					<view class="text-wrapper_5 flex-row justify-between">
						<text class="text_12" >{{item.lanhutext3}}</text>
						<text class="text_13" :style="{ color: item.lanhufontColor4 }">{{item.lanhutext4}}</text>
					</view>
					<view class="box_7 flex-col"></view>
					<view v-if="item.slot2 === 2" class="text-wrapper_6 flex-row justify-between">
						<text class="text_14">手续费：¥6</text>
						<text class="text_15">2020/2/12 11:02:51</text>
					</view>
					<text v-if="item.slot1 === 1" class="text_16">
						2020/2/13 19:21:05
					</text>
				</view>
			</view> -->
			<!-- type3充值卡  1次卡  2时间卡  4私教 -->
			<view class="list_2 flex-col">
				<view class="list-items_2 flex-col" v-for="(item, index) in loopData1" :key="index">
					<view class="box_6 flex-row justify-between">
						<text class="text_9">{{item.content}}</text>
						<view class="text-wrapper_4">
							<!-- <text class="text_10">{{item.to_money}}</text> -->
							<text class="text_10" v-if="data.type == 3">{{item.to_money}}元</text>
							<text class="text_10" v-if="data.type == 4 || data.type == 1">{{item.to_times}}次</text>
							<!-- <text class="text_11">.00</text> -->
						</view>
					</view>
					<view class="text-wrapper_5 flex-row justify-between">
						<text class="text_12">{{item.to_user}}</text>
						<text class="text_13" style="color: rgba(23,194,1,1);">转移成功</text>
					</view>
					<view class="box_7 flex-col"></view>
					<view  class="text-wrapper_6 flex-row justify-between">
						<text class="text_14">手续费：¥0</text>
						<text class="text_15">{{item.create_at}}</text>
					</view>
					<text v-if="item.slot1 === 1" class="text_16">
						{{item.create_at}}
					</text>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import cardPackItem from '@/pages/personal/card-pack/card-pack-item.vue'
	const index = require('@/api/personal/index.js')
	export default {
		components: {
			cardPackItem
		},
		data() {
			return {
				data: {},
				cardno: '',
				id: 0,
				loopData0: [{
						lanhuimage0: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5e7175f1789ac6911a5d194d40649c09196f0747.png',
						lanhutext0: '转到我的卡',
					},
					{
						lanhuimage0: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/65127e8d4e6e3a7b7ac39c6f41cf3219e2aeaf34.png',
						lanhutext0: '转到其他用户',
					},
				],
				loopData1: [{
						lanhutext0: '转给：我',
						lanhutext1: '-60.',
						lanhutext2: '00',
						lanhutext3: '1000元储值卡[2235;4856]',
						lanhutext4: '转移成功',
						lanhufontColor4: 'rgba(23,194,1,1)',
						slot1: 1,
					},
					{
						lanhutext0: '转给：15965544782',
						lanhutext1: '-60.',
						lanhutext2: '00',
						lanhutext3: '李有田',
						lanhutext4: '审核中',
						lanhufontColor4: 'rgba(255,191,18,1)',
						slot2: 2,
					},
				],
				listQuery: { //分页
					limit: 2,
					page: 1,
				},
				totalPage: "",
			}
		},
		onLoad(options) {
			this.cardno = options.cardno
		},
		onShow() {
			this.getMyCardDetail()
		},
		methods: {
			card_transfer_records(){
				uni.navigateTo({
					url:'./card_transfer_records?id=' + this.data.id  +
						"&type=" + this.data.type
				})
			},
			cardlist(item,index){
				console.log(item,index,'123')
				if (index == 0) {
					uni.showToast({
						title: '敬请期待',
						icon:'exception',
						duration:850
					});

					// uni.navigateTo({
					// 	url:'./card_go?cardno=' + this.cardno
					// })
				} else{
					uni.navigateTo({
						url:'./card_users?cardno=' + this.cardno
					})
				}
			},
			gocard(index) {
				this.selectcard = index
			},

			// 获取我的卡包详情
			async getMyCardDetail() {
				let params = {
					cardno: this.cardno,
					project_id: getApp().globalData.projectId,
					user_id: uni.getStorageSync('phone'),
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
				}
				let res = await index.getMyCardDetail(params)
				if (res.code === 1) {
					this.data = res.data.cardData
					this.shift_record()
				}
			},
			
			// 转移记录
			async shift_record() {
				let params = {
					project_id: getApp().globalData.projectId,
					appid: this.$https.weixinAppId,
					id:this.data.id,
					page: this.listQuery.page,
					limit: this.listQuery.limit,
				}
				let res = await index.shift_record(params)
				if (res.code === 1) {
					this.loopData1 = res.data.data
				}
			},
			

		}
	}
</script>

<style lang="scss" scoped>
	@import url("../../static/css/personal/index.css");
	@import url("../../static/css/common/common.scss");

	.card-detail {
		// padding-bottom: env(safe-area-inset-bottom);
		background-color: #ffffff;
		height: 98vh;

		.list_2 {
			width: 690rpx;
			height: 410rpx;
			justify-content: space-between;
			margin: 30rpx 0 354rpx 30rpx;

			.list-items_2 {
				box-shadow: 0px 13px 57px 0px rgba(8, 73, 162, 0.11);
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10px;
				width: 690rpx;
				height: 195rpx;
				border: 1px solid rgba(237, 235, 235, 1);
				margin-bottom: 20rpx;

				.box_6 {
					width: 628rpx;
					height: 27rpx;
					margin: 30rpx 0 0 31rpx;

					.text_9 {
						width: 500rpx;
						height:50rpx;
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
						font-weight: 500;
						text-align: left;
						line-height: 46rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.text-wrapper_4 {
						width: 76rpx;
						height: 21rpx;
						overflow-wrap: break-word;
						font-size: 0;
						font-family: DIN-Bold;
						font-weight: 700;
						text-align: right;
						white-space: nowrap;
						line-height: 46rpx;
						margin-top: 1rpx;

						.text_10 {
							width: 76rpx;
							height: 21rpx;
							overflow-wrap: break-word;
							color: rgba(0, 0, 0, 1);
							font-size: 28rpx;
							font-family: DIN-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 46rpx;
						}

						.text_11 {
							width: 76rpx;
							height: 21rpx;
							overflow-wrap: break-word;
							color: rgba(0, 0, 0, 1);
							font-size: 22rpx;
							font-family: DIN-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 46rpx;
						}
					}
				}

				.text-wrapper_5 {
					width: 627rpx;
					height: 22rpx;
					margin: 20rpx 0 0 32rpx;

					.text_12 {
						width: 266rpx;
						height: 22rpx;
						overflow-wrap: break-word;
						color: rgba(153, 153, 153, 1);
						font-size: 22rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 46rpx;
					}

					.text_13 {
						width: 87rpx;
						height: 22rpx;
						overflow-wrap: break-word;
						font-size: 22rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: right;
						white-space: nowrap;
						line-height: 46rpx;
					}
				}

				.box_7 {
					background-color: rgba(255, 255, 255, 1);
					width: 690rpx;
					height: 2rpx;
					border: 1px solid rgba(237, 235, 235, 1);
					margin-top: 31rpx;
				}

				.text-wrapper_6 {
					width: 96%;
					height: 24rpx;
					margin: 20rpx 20rpx 20rpx 31rpx;

					.text_14 {
						height: 23rpx;
						overflow-wrap: break-word;
						color: rgba(51, 51, 51, 1);
						font-size: 24rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 23rpx;
					}

					.text_15 {
						height: 23rpx;
						overflow-wrap: break-word;
						color: rgba(153, 153, 153, 1);
						font-size: 24rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: right;
						white-space: nowrap;
						line-height: 23rpx;
						// margin: 20rpx 20rpx 20rpx 0;
						margin-right: 20rpx;
					}
				}

				.text_16 {
					height: 23rpx;
					overflow-wrap: break-word;
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: right;
					white-space: nowrap;
					line-height: 23rpx;
					margin: 20rpx 20rpx 20rpx 0;
				}
			}
		}

		.top {
			height: 40vh;
			padding: 0rpx 30rpx 0rpx 30rpx;

			.list_1 {
				justify-content: space-between;
				display: flex;
				margin: 40rpx 0 40rpx 90rpx;

				.list-items_1 {
					width: 148rpx;
					height: 188rpx;
					margin-right: 203rpx;

					.icon_2 {
						width: 120rpx;
						height: 120rpx;
						margin-left: 14rpx;
					}

					.text_7 {
						width: 176rpx;
						height: 28rpx;
						overflow-wrap: break-word;
						color: rgba(0, 0, 0, 1);
						font-size: 30rpx;
						font-family: STXihei;
						font-weight: NaN;
						text-align: center;
						white-space: nowrap;
						line-height: 46rpx;
						margin-top: 40rpx;
					}
				}
			}
		}
	}
</style>